<clr-modal [(clrModalOpen)]="deleteOpen" clrModalSize="l">
    <h3 class="modal-title">{{'APP_BACKUP_FILE_REMOVE'|translate}}</h3>
    <div class="modal-body" #resource>
        <span>{{'APP_DEFAULT_DELETE_WARNING'|translate}}</span> <br>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="cancelDelete()">{{'APP_CANCEL'|translate}}</button>
        <button type="submit" class="btn btn-primary" (click)="submitDelete()">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>
<h3>{{'APP_BACKUP_FILE_LIST'|translate}}</h3>
<clr-datagrid [(clrDgSelected)]="selected">
    <clr-dg-action-bar>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-secondary"
                    [disabled]="selected.length != 1"
                    (click)="deleteFile(selected[0].name)">
                <clr-icon shape="close"></clr-icon>
                {{'APP_DELETE'|translate}}
            </button>
            <button type="button" class="btn btn-sm btn-secondary"
                    [disabled]="selected.length != 1 "
                    (click)="restore(selected[0].name)">
                <clr-icon shape="backup-restore" size="16"></clr-icon>
                {{'APP_RESTORE'|translate}}
            </button>
        </div>
    </clr-dg-action-bar>

    <clr-dg-column>{{'APP_NAME'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_BACKUP_FILE_FOLDER'|translate}}</clr-dg-column>
    <clr-dg-column>{{'APP_CREATED_DATE'|translate}}</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
        <clr-dg-cell>{{item.name}}</clr-dg-cell>
        <clr-dg-cell>{{item.folder}}</clr-dg-cell>
        <clr-dg-cell>{{item.createdAt | date: 'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>
        <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                           (clrDgPageChange)="refresh()">
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_BACKUP_FILE"|translate}}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
